﻿<template>
    <el-dialog :title="title" :visible="state" :before-close="close" :close-on-click-modal="false" style="font-weight: 700">
        <el-form :model="formData">
            <el-form-item label="联系人:" :label-width="formLabelWidth">
                <el-input v-model="formData.user_name" autocomplete="off" @blur="userNameCS" clearable placeholder="不少于2个字符"></el-input>
                <span :style="userNametextState">{{userNametext}}</span>
            </el-form-item>
            <el-form-item label="身份证号:" :label-width="formLabelWidth">
                <el-input v-model="formData.user_idnum" autocomplete="off" @blur="userIdnumCS" clearable placeholder="18位数身份证号"></el-input>
                <span :style="userIdnumtextState">{{userIdnumtext}}</span>
            </el-form-item>
            <el-form-item label="电话号码:" :label-width="formLabelWidth">
                <el-input v-model="formData.user_phone" autocomplete="off" @blur="userPhoneCS" clearable placeholder="11位数电话号码"></el-input>
                <span :style="userPhonetextState">{{userPhonetext}}</span>
            </el-form-item>
            <el-form-item label="初始密码:" :label-width="formLabelWidth"  v-if="title==='添加用户信息'">
                <el-input v-model="formData.user_pwd" autocomplete="off" :show-password="true" @blur="userPwdCS" clearable placeholder="6到15位字符"></el-input>
                <span :style="userPwdtextState">{{userPwdtext}}</span>
            </el-form-item>
            <el-form-item label="电子邮箱:" :label-width="formLabelWidth">
                <el-input v-model="formData.user_email" autocomplete="off" @blur="userEmailCS" clearable placeholder="输入邮箱"></el-input>
                <span :style="userEmailtextState">{{userEmailtext}}</span>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <!--                <el-input v-model="form.userTest" autocomplete="off" type="textarea "></el-input>-->
                <el-input
                        v-model="formData.user_desc"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 6}"
                        placeholder="请输入内容"
                        maxlength="30"
                        show-word-limit
                        style="width: 23rem;position: absolute;left: 0;">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="tiJiao">{{title}}</el-button>
            <el-button @click="quXiao">取 消</el-button>
        </div>
    </el-dialog>

</template>

<script>
    import jiangMethod from '../../utils/jiangMethod'
    import * as api from '../../utils/api'
    export default {
        name: "userForm",
        props:['title','state','formData'],
        data(){
            return{
                formLabelWidth: '8rem',
                isShowPwd:true,
                userFormData:{
                    userName:'', userIdnum:'', userPhone:'', userPwd:'', userDesc:'',userId:'',userEmail:''
                },
                userNameState:false, userIdnumState:false, userPhoneState:false, userPwdState:false,userEmailState:false,
                userNametext:'', userIdnumtext:'', userPhonetext:'', userPwdtext:'',userEmailtext:'',
                userNametextState:'', userIdnumtextState:'', userPhonetextState:'', userPwdtextState:'', userEmailtextState:'',

                returnFormData:''
            }
        },
        watch:{
            formData:function () {
                // console.log(this.formData)
            },
            title:function () {
                if (this.title==='添加用户信息'){
                    this.userNameState=false;
                    this.userIdnumState=false;
                    this.userPhoneState=false;
                    this.userPwdState=false;
                    this.userEmailState=false;
                }else {
                    this.userNameState=true;
                    this.userIdnumState=true;
                    this.userPhoneState=true;
                    this.userPwdState=true;
                    this.userEmailState=true;
                }
            }
        },
        methods:{
            //关闭弹窗，清除状态
            clearState(){
                this.userFormData.userName=''
                this.userFormData.userIdnum=''
                this.userFormData.userPhone=''
                this.userFormData.userPwd=''
                this.userFormData.userDesc=''
                this.userFormData.userEmail=''
                this.userNametext=''
                this.userIdnumtext=''
                this.userPhonetext=''
                this.userPwdtext=''
                this.userEmailtext=''
            },

            //验证
            userNameCS(){
                // console.log(this.formData.user_name)
                this.userNameState=jiangMethod.userNameYZ(this.formData.user_name)
                // console.log(this.userNameState)
                if (this.userNameState){
                    this.userNametext='正确'
                    this.userNametextState='color:lightgreen'
                }else if (this.formData.user_name===''||this.formData.user_name===undefined){
                    this.userNametext='请输入内容'
                    this.userNametextState='color:rgb(255,208,75)'
                }else {
                    this.userNametext='错误'
                    this.userNametextState='color:red'
                }
            },
            userIdnumCS(){
                this.userIdnumState=jiangMethod.userIdnumYZ(this.formData.user_idnum)
                if (this.userIdnumState){
                    this.userIdnumtext='正确'
                    this.userIdnumtextState='color:lightgreen'
                }else if (this.formData.user_idnum===''){
                    this.userIdnumtext='请输入内容'
                    this.userIdnumtextState='color:rgb(255,208,75)'
                }else {
                    this.userIdnumtext='错误'
                    this.userIdnumtextState='color:red'
                }
            },
            userPhoneCS(){
                if (this.title==='添加用户信息'){
                    this.axios({
                        method:'get',
                        url:api.queryUser,
                        params:{userName:this.formData.user_phone}
                    }).then(data=>{
                        // console.log(data)
                        if (data.data.code===200){
                            this.$message({
                                type:'warning',
                                message:'该手机号已添加过用户,请重新输入手机号'
                            })
                            this.formData.user_phone=''
                            this.userPhonetext=''
                            this.userPhonetextState=''
                        }
                    })
                }
                this.userPhoneState=jiangMethod.userPhoneYZ(this.formData.user_phone)
                if (this.userPhoneState){
                    this.userPhonetext='正确'
                    this.userPhonetextState='color:lightgreen'
                }else if (this.formData.user_phone===''){
                    this.userPhonetext='请输入内容'
                    this.userPhonetextState='color:rgb(255,208,75)'
                }else {
                    this.userPhonetext='错误'
                    this.userPhonetextState='color:red'
                }
            },
            userPwdCS(){
                this.userPwdState=jiangMethod.userPwdYZ(this.formData.user_pwd)
                if (this.userPwdState){
                    this.userPwdtext='正确'
                    this.userPwdtextState='color:lightgreen'
                }else if (this.formData.user_pwd===''){
                    this.userPwdtext='请输入内容'
                    this.userPwdtextState='color:rgb(255,208,75)'
                }else {
                    this.userPwdtext='错误'
                    this.userPwdtextState='color:red'
                }
            },
            userEmailCS(){
                this.userEmailState=jiangMethod.userEmailYZ(this.formData.user_email)
                if (this.userEmailState){
                    this.userEmailtext='正确'
                    this.userEmailtextState='color:lightgreen'
                }else if (this.formData.user_email===''){
                    this.userEmailtext='请输入内容'
                    this.userEmailtextState='color:rgb(255,208,75)'
                }else {
                    this.userEmailtext='错误'
                    this.userEmailtextState='color:red'
                }
            },
            // 提交
            tiJiao(){
                // console.log(this.title)
                // 判断title是什么操作
                // 将数据转换为后端接收的字段名
                this.userFormData.userName=this.formData.user_name
                this.userFormData.userIdnum=this.formData.user_idnum
                this.userFormData.userPhone=this.formData.user_phone
                this.userFormData.userPwd=this.formData.user_pwd
                this.userFormData.userDesc=this.formData.user_desc
                this.userFormData.userId=this.formData.user_id
                this.userFormData.userEmail=this.formData.user_email

                // console.log(this.userFormData)
                if (this.title==="添加用户信息"){
                    // 发起请求
                    if (this.userNameState&&this.userIdnumState&&this.userPhoneState&&this.userPwdState&&this.userEmailState){
                        this.axios({
                            method:'post',
                            url:api.addUser,
                            data:this.userFormData
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                        })
                        this.$emit('quxiaotanKuang')
                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }else {
                    // 发起请求
                    if (this.userNameState&&this.userIdnumState&&this.userPhoneState&&this.userPwdState&&this.userEmailState){
                        // console.log(this.userFormData)
                        this.axios({
                            method:'post',
                            url:api.updateUser,
                            data:this.userFormData
                        }).then(data=>{
                            // console.log(data)
                            if (data.data.code===200){
                                this.$message({
                                    type:'success',
                                    message:data.data.msg
                                })
                            }else {
                                this.$message({
                                    type:'error',
                                    message:data.data.msg
                                })
                            }
                        })
                        this.$emit('quxiaotanKuang')
                    }else {
                        this.$message({
                            type:'warning',
                            message:'请检查输入的信息是否存在错误'
                        })
                    }
                }
            },



            close(){
                this.clearState()
                this.$emit('quxiaotanKuang')
                this.$message({
                    showClose: true,
                    type:"warning",
                    message:'关闭操作'
                })
            },
            quXiao(){
                this.clearState()
                this.$emit('quxiaotanKuang')
                this.$message({
                    showClose: true,
                    type:"warning",
                    message:'取消操作'
                })
            },

        },

    }
</script>

<style lang="less" scoped>
    .el-form{
        width: 65%;
        margin: auto;
        /*border: 1px solid red;*/
        .el-form-item{
            position: relative;
            .el-input{
                /*border: 1px solid red;*/
                width: 23rem;
                display: inline-block;
                position: absolute;
                left: 0;
            }
            span{
                position: absolute;
                left: 24rem;
            }
        }

    }

</style>